<template>
    <div id="app">
        <!-- 页面缓存处理 -->
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <!-- 页面缓存处理 -->

        <!-- 无页面缓存处理 -->
        <router-view v-if="!$route.meta.keepAlive"></router-view>
        <!-- 无页面缓存处理 -->

        <!-- 联系客服入口 -->
        <a
            v-if="$route.meta.serviceOnlineShow"
            class="service-online"
            href='javascript:;'
            onclick='easemobim.bind({configId: "c490fa9c-6496-48ea-992a-667f779852ae"})'
        >
            <img src="../src/assets/images/home/service-online.png" />
        </a>
        <!-- 联系客服入口 -->

        <!-- 首页引导页 -->
        <!-- <guide></guide> -->
        <!-- 首页引导页 -->
    </div>
</template>

<script>
import Guide from '@/pages/Home/components/Guide'
import wx from 'weixin-js-sdk'
export default {
    name: 'App',
    components: {
        Guide
    },
    data() {
        return {
            userName: '',
            userInfo: ''
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getEasemobimConfig() {
            window.easemobim = window.easemobim || {}
            easemobim.config = {
                configId: 'c490fa9c-6496-48ea-992a-667f779852ae',
                hide: true,
                autoConnect: true,
                hideKeyboard: true,
                visitor: {
                    trueName: this.userInfo.nick_name,
                    phone: this.userInfo.mobile_phone,
                    userNickname: this.userInfo.id
                }
            }
        },
        getWxConfig() {
            this.axios.post('/api/jsconfig.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    let routeHost = window.location.origin
                    let routeHref = window.location.href.split('#')[0]
                    let routePath = encodeURIComponent(
                        window.location.href.split('#')[1]
                    )
                    wx.config(data.data)
                    wx.ready(function() {
                        //需在用户可能点击分享按钮前就先调用
                        if (typeof wx.updateAppMessageShareData == 'function') {
                            wx.updateAppMessageShareData({
                                title: '美女省钱神器：398元承包你一年的美妆', // 分享标题
                                desc:
                                    '护肤/彩妆/洗护/香氛，8大国内外品牌，300多个单品任选', // 分享描述
                                link: routeHref + '&route=' + routePath, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: routeHost + '/static/images/logo.png', // 分享图标
                                success: function() {
                                    // 设置成功
                                }
                            })
                        } else {
                            wx.onMenuShareAppMessage({
                                title: '美女省钱神器：398元承包你一年的美妆', // 分享标题
                                desc:
                                    '护肤/彩妆/洗护/香氛，8大国内外品牌，300多个单品任选', // 分享描述
                                link: routeHref + '&route=' + routePath, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: routeHost + '/static/images/logo.png', // 分享图标
                                type: '', // 分享类型,music、video或link，不填默认为link
                                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                                success: function() {
                                    // 用户点击了分享后执行的回调函数
                                }
                            })
                        }
                        if (typeof wx.onMenuShareTimeline == 'function') {
                            wx.onMenuShareTimeline({
                                title: '美女省钱神器：398元承包你一年的美妆', // 分享标题
                                desc:
                                    '护肤/彩妆/洗护/香氛，8大国内外品牌，300多个单品任选', // 分享描述
                                link: routeHref + '&route=' + routePath, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: routeHost + '/static/images/logo.png', // 分享图标
                                success: function() {
                                    // 设置成功
                                }
                            })
                        } else {
                            wx.onMenuShareTimeline({
                                title: '美女省钱神器：398元承包你一年的美妆', // 分享标题
                                desc:
                                    '护肤/彩妆/洗护/香氛，8大国内外品牌，300多个单品任选', // 分享描述
                                link: routeHref + '&route=' + routePath, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: routeHost + '/static/images/logo.png', // 分享图标
                                success: function() {
                                    // 用户点击了分享后执行的回调函数
                                }
                            })
                        }
                    })
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        }
    },
    watch: {
        $route: {
            handler: function(val, oldVal) {
                if (
                    this.$route.path == '/goodsDetail' ||
                    this.$route.path == '/index1' ||
                    this.$route.path == '/starDetail'
                ) {
                    return
                }
                this.getWxConfig()
            }
        }
    }
}
</script>

<style lang="stylus">
*
    -webkit-overflow-scrolling touch
    -webkit-animation rightlate
    animation-duration 1s
    -webkit-animation-duration 1s
.service-online
    position fixed
    bottom 1.5rem
    right 0.26rem
    width 1.3rem
    height 1.3rem
    border-radius 100%
    display flex
    align-items center
    justify-content center
    background-color rgba(0, 0, 0, 0.7)
    z-index 3
.service-online img
    width 0.8rem
    height 0.8rem
</style>

